<template>
	<scroll-view style="height: 100vh;">
		<form @submit="formSubmit">
			<view class="addressitem">
				<text>联系人</text>
				<input name="realname" type="text" maxlength="6" :value="addrinfo.realname" placeholder="名字" />
			</view>

			<view class="addressitem">
				<text>手机号码</text>
				<input name="phone" type="number" maxlength="11" :value="addrinfo.phone" placeholder="11位手机号" />
			</view>

			<view class="addressitem" @click="openAddress">
				<text>选择区域</text>
				<input disabled="true" name="area" type="text" :value="pickerText" placeholder="地区信息" />
			</view>

			<view class="addressitem" style="min-height:100rpx ;">
				<text>详细地址</text>
				<textarea style="margin-left: 15rpx;width: 60%;" maxlength="28" auto-height="true" name="address" :value="addrinfo.address"
				 placeholder="街道门牌号信息" />
				</view>
				
				<view class="addressitem">
					<text>邮编</text>
					<input name="post_code" type="number" maxlength="6"  :value="addrinfo.post_code" placeholder="邮政编码"/>
				</view>
				<view class="defaddr">
					<view class="addrtitle">默认地址</view>
					<radio-group name="def">
						<label class="radio"  v-for="(item,index) in defaddrs" :key="index"><radio :value="index" :checked="addrinfo.def==index"/>{{item}}</label>
					</radio-group>
				</view>
				<button formType="submit" type="primary" class="comfir">提交</button>
			</form>
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
	</scroll-view>
	
</template>

<script>
/**
 * 新增地址
 */

export default {
		data() {
			return {
				defaddrs:['否','是'],
				cityPickerValueDefault: [0, 0, 1], 
				pickerText: '',
				addrinfo:{
					realname:'',
					phone:'',
					area:'',
					address:'',
					post_code:'',
				},
				formid:'',
			}
		},
		onLoad(option){
			if(option.id){
				this.formid = option.id;
				this.getdatail(option.id);
			}
		},
		methods:{
			//获取详情
			getdatail(id){
				this.$HttRequest({
					url: '/member_addr/info',
					param: {id:id}
				}).then(res => {
					console.log(res);
					if (res.status === 10000) {
						this.addrinfo = res.data;
						this.pickerText = res.data.area; 
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch(error => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},
			
			//打开区域
			openAddress() {
				this.cityPickerValueDefault = [0,0,1];
				this.$refs.simpleAddress.open();
			},
			
			//提交表单数据
			formSubmit(e) {
				let formdata = e.detail.value;
				// console.log(formdata);
				// return
				if(!formdata.realname || !formdata.area || !formdata.address || !formdata.phone){
					this.$ShowMsg('提交的信息不完整！');
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(formdata.phone))) {
					this.$ShowMsg("手机号码有误！");
					return;
				}
				if(this.formid){
					formdata.id= this.formid;
				}
				this.$HttRequest({
					url: '/member_addr/edit',
					param: formdata
				}, 'POST').then(res => {
					console.log(res);
					if (res.status === 10000) {
						this.$ShowMsg(this.formid?'修改成功！':'添加成功!');
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},3000);
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch(error => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
				
			},
			onConfirm(e) {
				this.pickerText = e.label;
				console.log( JSON.stringify(e));
			}
			
		}
	}
</script>

<style lang="scss">
	//设置默认地址
	.defaddr{
		display: flex;
		justify-content: flex-start;
		width: 80%;
		align-items: center;
		font-size: 32rpx;
		border-bottom-color: #eaeaea;
		height: 100rpx;
		padding-left: 20rpx;
		.addrtitle{
			
			width: 130rpx;
		}
		.radio{
			margin: 0 20rpx;
			radio{
				transform: scale(0.7);
			}
		}					
	}
	.addressitem {
		padding: 20rpx;
		flex: 1;
		height: 60rpx;
		border-bottom: 1px solid #e6e6e6;
		display: flex;	
		justify-content: flex-start;
		align-items: center;
		border-bottom-color: #eaeaea;
		border-bottom-style:solid;
		border-bottom-width: 1rpx;
		font-size: 32rpx;
		text{
			width: 145rpx;
		}
		input {
			margin-left: 15rpx;
		}
	}
	.comfir {
		width: 80%;
		height: 100rpx;
		background: linear-gradient(rgb(84, 172, 253), rgb(17, 140, 254));
		box-shadow: 0 0 15rpx #118CFE;
		border-radius: 25rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		margin-top: 150rpx;
	}
</style>
